<template>
  <div style="display: flex;flex-direction: row;border:1px solid #EBEEF5;background: #FAFAFA">
    <div style="width: 400px;padding: 10px;">
      <table class="order-info" style="width: 100%;padding: 10px">
        <tr v-for="(item, index) in orderInfoItems" :key="index">
          <td class="name">{{ item.label }}：</td>
          <td>
            <span>{{ item.text }}</span>
            <el-popover
                placement="top-end"
                width="320"
                trigger="hover" v-if="item.more">
              <slot>
                <p v-for="(sub, idx) in item.more" :key="idx" style="margin-top: 10px">
                  <span>{{ sub.label }}：</span>
                  <span>{{ sub.text }}</span>
                </p>
              </slot>
              <template v-slot:reference>
                         <span style="float:right;cursor:pointer;">更多<i
                             class="el-icon-arrow-down" style="margin-left:4px"></i></span>
              </template>
            </el-popover>
          </td>
        </tr>
      </table>
    </div>
    <div style="width: 220px;padding: 10px;border-left: 1px solid #EBEEF5;">
      <table class="order-info">
        <template v-for="(item, index) in charges">
          <tr v-if="item.text" :key="index">
            <td class="name">{{ item.label }}</td>
            <td style="text-align:right;color:#666">
              <span>{{ item.symbol }}{{ item.text }}</span>
            </td>
          </tr>
        </template>
      </table>
    </div>
    <div style="flex: 1;background: #FFF"></div>
  </div>
  <el-tabs v-model="tabName" type="card" @tab-click="onTabClick" style="margin-top: 30px">
    <el-tab-pane label="订单商品" name="goods">
      <order-detail-goods :goods-list="goodsList"/>
    </el-tab-pane>

    <el-tab-pane label="物流信息" name="logistics">
      <order-logistics-list ref="logistics"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, defineAsyncComponent, ref, Ref} from 'vue'
import useOrder from '../api/order'

export default defineComponent({

  components: {
    OrderDetailGoods: defineAsyncComponent(() =>
        import('./OrderDetailGoods.vue')),
    OrderLogisticsList: defineAsyncComponent(() =>
        import('./OrderLogisticsList.vue')),
  },

  setup() {
    const order = useOrder()
    const logistics: Ref = ref(null)

    const state = reactive({
      loading: false,
      tabName: 'goods',
      orderSn: '',
      orderInfo: {user_info: {}, order_id: '', goods_amount: 0},
      modules: {},
      charges: [
        {label: '商品总额', symbol: '', field: 'goods_amount', text: ''},
        {label: '运费', symbol: '+', field: 'shipping_fee', text: ''},
        {label: '优惠券', symbol: '-', field: 'coupon_amount', text: ''},
        {label: '积分抵扣', symbol: '-', field: 'integral_amount', text: ''},
        {label: '其他优惠', symbol: '-', field: 'change_amount', text: ''},
        {label: '实付金额', symbol: '', field: 'order_amount', text: ''},
      ],
      orderInfoItems: [
        {label: '订单编号', field: 'order_sn', text: ''},
        {
          label: '下单时间', field: 'order_time', text: '', more: [
            {label: '支付时间', field: 'pay_time', text: ''},
            {label: '取消时间', field: 'cancel_time', text: ''},
            {label: '发货时间', field: 'shipping_time', text: ''},
            {label: '退款时间', field: 'refund_time', text: ''},
            {label: '完成时间', field: 'complete_time', text: ''},
          ]
        },
        {label: '下单用户', field: 'nick_name', text: ''},
        {label: '收货地址', field: 'full_address', text: ''},
        {
          label: '支付信息', field: 'pay_status_name', text: '', more: [
            {label: '支付方式', field: 'pay_type_name', text: ''},
            {label: '支付时间', field: 'pay_time', text: ''},
            {label: '支付流水', field: 'out_trade_no', text: ''}
          ]
        },
        {
          label: '运送信息', field: 'shipping_status', text: '', more: [
            {label: '运送公司', field: '', text: ''},
            {label: '运送单号', field: '', text: ''},
          ]
        },
        {label: '订单备注', field: 'buyer_remark', text: ''},
        {label: '系统备注', field: 'seller_remark', text: ''},
      ],
      goodsList: []
    })

    // 初始化
    const init = async (data: { order_sn: string }): Promise<void> => {
      state.orderSn = data.order_sn
      state.loading = true
      const res = await order.getInfo(data.order_sn)
      state.loading = false
      if (res.data.code !== 0) return

      let orderInfo = res.data.data
      state.goodsList = orderInfo.goods.data.list
      state.orderInfo = orderInfo
      state.charges = orderInfo.charges.data.list
      let basic = orderInfo.basic.data.field
      let address = orderInfo.address.data.field
      basic.nick_name = orderInfo.user.data.field.nick_name
      basic.full_address = [address.full_address, address.contact, address.contact_number].join(',')
      state.orderInfoItems.forEach(item => {
        item.text = basic[item.field] || ''
        if (item.more !== undefined) {
          (item.more as []).forEach((sub: { [k: string]: string }) => sub.text = basic[sub.field] || '')
        }
      })
    }

    const onTabClick = () => {
      if (state.tabName === 'logistics') logistics.value.init({order_sn: state.orderSn})
    }

    const refresh = (): void => {
      // init(state.userInfo)
    }

    return {
      init,
      logistics,
      ...toRefs(state),
      refresh,
      onTabClick
    }
  }
})
</script>
<style scoped>
.order-info {
  line-height: 2;
  border-collapse: collapse;
  font-size: 14px;
  width: 100%;
}

.order-info td.name {
  width: 100px;
  vertical-align: top;
  padding: 0 10px;
  background: #FAFAFA
}

.order-info td .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  padding-left: 10px;
  padding-right: 10px;
}
</style>